<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" charset="utf-8">
	function input(){
		var id = document.getElementById("id").value;
		var name = document.getElementById("name").value;
		
		var tbody = document.getElementById("tbody");
		var tr3 = document.createElement("tr");
		var td5 = document.createElement("td");
		var td6 = document.createElement("td");
		var txt5 = document.createTextNode(id);
	  	var txt6 = document.createTextNode(name);
	  	
	  	
	  	td5.appendChild(txt5);
	  	td6.appendChild(txt6);
	   	tr3.appendChild(td5);
	  	tr3.appendChild(td6);
	  	tbody.appendChild(tr3);
	  
	}

	
	function makeRows () {
	  //두행을 tbody 추가 : id-1, 홍길동, id-2 김철수
	  var tbody = document.getElementById("tbody");
	  
	  //tbody내의 tr들을 삭제
	  
	  while(tbody.hasChildNodes()){
	  	tbody.removeChild(tbody.firstchild);
	  }
	  
	  //tr
	  var tr1 = document.createElement("tr");
	  var tr2 = document.createElement("tr");
	  
	  //td
	  var td1 = document.createElement("td");
	  var td2 = document.createElement("td");
	  var td3 = document.createElement("td");
	  var td4 = document.createElement("td");
	  
	  
	  //id-1 홍길동-text node
	  var txt1 = document.createTextNode("id-1");
	  var txt2 = document.createTextNode("홍길동");
	  var txt3 = document.createTextNode("id-2");
	  var txt4 = document.createTextNode("김철수");
	 
	  
	  //td-text
	  td1.appendChild(txt1);
	  td2.appendChild(txt2);
	  td3.appendChild(txt3);
	  td4.appendChild(txt4);
	
	  
	  //tr-td
	  tr1.appendChild(td1);
	  tr1.appendChild(td2);
	  tr2.appendChild(td3);
	  tr2.appendChild(td4);
	 
	  //tbody - tr
	  tbody.appendChild(tr1);
	  tbody.appendChild(tr2);
	  
	}
	
</script>

</head>
<body>
<table border='1' width='400'>
	<thead>
		<input type="text" name="some_name" value="Id를 입력하세요" id="id"/>
		<input type="text" name="some_name" value="이름을 입력하세요" id="name"/>
		<input type="submit" name="some_name" value="추가" id="input" onclick="input();"/>
		<tr>
			<td>ID</td>
			<td>이름</td>
		</tr>
	</thead>
	<tbody id='tbody'></tbody><!--tbody는 일단 아이디값만 주고 빈값으로 넣는 이유는 이곳에 버튼을 누르면 추가--> 
	<tfoot>
		<tr>
			<td colspan='2'>
				<input type="button" value="tr 추가" onclick="makeRows()">
			</td>
		</tr>	</tfoot>
</table>
</body>
</html>